<template>
  <div>
    <BaseSearch :config="searchConfig" v-bind="form" ref="search"></BaseSearch>
    <div class="role-btns mb20">
      <el-button size="small" type="primary" @click="addOrEdit()" v-if="isCanAdd">添加</el-button>
      <el-button size="small" type="danger" @click="del()" v-if="isCanDel">删除</el-button>
    </div>
    <BaseTable :columns="columns" v-bind="table" @selectChange="selectChange"></BaseTable>
  </div>
</template>

<script>
import BaseSearch from '@/components/BaseSearch/index.vue'
import BaseTable from '@/components/BaseTable/index.vue'
import { FormTableMixin } from '@/mixins/form-table'
import { STATUS } from '@/constants/baseModel.js'
import http from '@/utils/request'
const service = async params => {
  const { records, total } = await http.get('/accounts', {
    params: params,
  })

  return {
    data: records,
    total: total,
  }
}

export default {
  name: 'accountList',
  components: { BaseSearch, BaseTable },
  mixins: [FormTableMixin(service)],
  data() {
    const isCanEdit = this.$checkAccess('MENU_ACCOUNT_MANAGEMENT_EDIT')
    const isCanDetail = this.$checkAccess('MENU_ACCOUNT_MANAGEMENT_WATCH')
    return {
      STATUS,
      searchConfig: [
        { component: 'input', prop: 'tenantName', label: '账号名称', placeholder: '请输入账号名称' },
        {
          component: 'select',
          prop: 'roleId',
          label: '角色',
          options: [],
        },
        {
          component: 'select',
          prop: 'appCode',
          label: '所属项目',
          options: [],
        },
      ],
      columns: [
        { type: 'selection' },
        { label: '用户名称', prop: 'tenantName' },
        {
          label: '登录账号',
          prop: 'loginAccount',
        },
        { label: '角色', prop: 'roleName' },
        { label: '关联项目', prop: 'relationApp' },
        { label: '数据范围', prop: 'relationProduct' },
        { label: '最后登录时间', prop: 'lastLoginTime' },
        {
          label: '状态',
          prop: 'status',
          render: (val, row) => {
            return <span>{STATUS[row.status]}</span>
          },
        },
        {
          label: '操作',
          render: (val, row) => {
            return (
              <div>
                {isCanEdit && (
                  <el-button
                    type="text"
                    onClick={() => {
                      this.addOrEdit(row)
                    }}>
                    编辑
                  </el-button>
                )}
                {isCanDetail && (
                  <el-button
                    type="text"
                    onClick={() => {
                      this.watch(row)
                    }}>
                    查看
                  </el-button>
                )}
              </div>
            )
          },
        },
      ],
      delList: [],
    }
  },
  computed: {
    isCanAdd() {
      return this.$checkAccess('MENU_ACCOUNT_MANAGEMENT_ADD')
    },
    isCanDel() {
      return this.$checkAccess('MENU_ACCOUNT_MANAGEMENT_DEL')
    },
  },
  methods: {
    selectChange(curItem) {
      console.log(curItem)
      this.delList = curItem
    },
    addOrEdit(item) {
      if (item) {
        return this.$router.push({ name: 'accountAddEdit', query: { userId: item.id, title: 'edit' } })
      }
      this.$router.push({ name: 'accountAddEdit' })
    },
    watch(item) {
      this.$router.push({ name: 'accountAddEdit', query: { userId: item.id, title: 'watch' } })
    },
    del() {
      if (!this.delList.length) return this.$message.warning('请选择需要删除的用户')
      this.delMessageBox()
    },
    async delMessageBox() {
      const action = await this.$confirm('确认删除?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
      action && this.delRequest()
    },
    async delRequest() {
      // const ids = this.delList.map(item => item.id)
      const params = {
        delUserIds: this.delList.map(item => item.id),
      }
      await this.$http.delete('/accounts/delete', {
        data: params,
      })
      this.$refs.search.$refs.searchForm.resetFields()
      this.form.onSubmit()
    },
    // 角色列表
    async getRoleListRequest() {
      const roleList = await this.$http.get('/roles/list')
      if (roleList && roleList.length) {
        this.searchConfig[1].options = roleList.map(item => {
          return {
            label: item.name,
            value: item.id,
          }
        })
      }
    },
    //获取来源
    async getSourceListRequest() {
      const sourceList = await this.$http.get(`/app/list`)
      if (sourceList && sourceList.length) {
        const list = sourceList.map(item => {
          return {
            label: item.name,
            value: item.code,
          }
        })
        this.searchConfig[2].options = [...list]
      }
    },
  },
  mounted() {
    this.getSourceListRequest()
    this.getRoleListRequest()
  },
}
</script>

<style lang="scss" scoped></style>
